﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HEVC播放器</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="description" content="https://gitee.com/null_751_0808/WasmVideoPlayer">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        body,html{
            margin:0;
            padding:0;
        }
        #playCanvas,.canvasDiv {
            width: 100%;
            height: 667px;
        }
        .canvasDiv{
            position: relative;
        }
        .loadEffect {
            width: 120px;
            height: 120px;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0; 
            z-index: 999;
        }

        .loadEffect span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0.2;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 14px;
            top: 14px;
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -8px;
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 14px;
            right:14px;
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 14px;
            bottom:14px;
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
        }
    </style>
</head>

<body>
    <div class="canvasDiv">
        <div class="loadEffect" id="loading" style="display:none;">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <canvas id="playCanvas" width="750" height="667" onclick="playVideo(true)">
    </div>
    <script type='text/javascript' src="common.js"></script>
    <script type='text/javascript' src="pcm-player.js"></script>
    <script type='text/javascript' src="webgl.js"></script>
    <script type='text/javascript' src="player.js"></script>
    <script type='text/javascript'>
        const url = new URLSearchParams(location.search).get('url'),
            loadingDiv = document.getElementById("loading");

        //Player object.
        self.player = new Player();
        self.player.setLoadingDiv(loadingDiv);
        //Formated logger.
        var logger = new Logger("Page");

        function playVideo(isReplay) {
            if(isReplay){
                self.player.stop();
            }
            var currentState = self.player.getState();

            if (currentState != playerStatePlaying) {
                const canvasId = "playCanvas";
                var canvas = document.getElementById(canvasId);
                if (!canvas) {
                    logger.logError("No Canvas with id " + canvasId + "!");
                    return false;
                }

                self.player.play(url, canvas, function (e) {
                    console.log("play error " + e.error + " status " + e.status + ".");
                    if (e.error == 1) {
                        logger.logInfo("Finished.");
                    }
                }, 512 * 1024,false);//protoObj.waitLength, protoObj.stream
            } else {
                self.player.pause();
            }

            return true;
        }
        if(url){
            playVideo(false)
        }
    </script>
</body>
</html>
